<template>
	<view :class="['comp-item',`qlty-${itemDataVolume.qlty}`]" @click="pop_show = true">
		<view :class="['item-ico']">
			<image class="ico" :src="`../../static/assets/items/${itemDataVolume.id}.png`"></image>
			<view class="lock" v-if="itemDataVolume.lock">
				<image class="lock-ico" src="../../static/assets/ico/lock.png"></image>
			</view>
		</view>
		

		<view class="item-pop-cover" v-if="pop_show" @click.stop="pop_show = false">
			<view class="item-pop" @click.stop>
				<view :class="['name',`qlty-${itemDataVolume.qlty}`]">
					<view>{{itemDataVolume.name}}</view>
				</view>
				
				<view class="attr-warp">
					<view class="hr"></view>
					<view class="info">
						<view :class="['item-face',`qlty-${itemDataVolume.qlty}`]">
							<image class="ico" :src="`../../static/assets/items/${itemDataVolume.id}.png`" mode=""></image>
						</view>
						<view class="item-info">
							<view class="row">
								<view class="label">穿戴等级：</view><view :class="['value',player.lv < itemDataVolume.lv ? 'not-enough' : '']">{{itemDataVolume.lv}}</view>
							</view>
							<!-- <view class="row" style="color:var(--color-green)">
								<view class="label">战力：</view><view class="value">100</view>
							</view> -->
						</view>
					</view>
				</view>

				
				<view class="attr-warp">
					<view class="hr"></view>
					<view class="attr">
						<view class="hd">[基础属性]</view>
						<view class="bd">
							<view :class="['item']" v-if="itemDataVolume.min_atk || itemDataVolume.max_atk">攻击：{{itemDataVolume.min_atk}}-{{itemDataVolume.max_atk}}</view>
							<view :class="['item']" v-if="itemDataVolume.min_def || itemDataVolume.max_def">防御：{{itemDataVolume.min_def}}-{{itemDataVolume.max_def}}</view>
							<view :class="['item']" v-if="itemDataVolume.hp">血量：{{itemDataVolume.hp}}</view>
						</view>
					</view>
				</view>
				
				<view class="attr-warp" v-if="itemDataVolume.special.length">
					<view class="hr"></view>
					<view class="attr">
						<view class="hd">[附加属性]</view>
						<view class="bd" style="color:var(--color-purple)">
							
							<block v-for="(item,index) in itemDataVolume.special">
								<view :class="['item']">{{$attr_map[item.name]}}：{{item.value}}</view>
							</block>
							

						</view>
					</view>
				</view>
				

				<view class="operate" v-if="operate.length">
					<view class="item" v-if="operate.includes('puton') && itemDataVolume.lv<=player.lv" @click="putOn">装备</view>
					<view class="item" v-if="operate.includes('retrieve')" @click="retrieve">回收</view>
					<view class="item" v-if="operate.includes('takeoff')" @click="takeOff">卸下</view>
					<view class="item" v-if="operate.includes('lock')" @click="lock">{{itemDataVolume.lock ? '解锁' : '上锁'}}</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		name: "comp-item",
		props: {
			itemDataVolume: {
				type: Object,
				default: null
			},
			operate : {
				type : Array,
				default : []
			}
		},
		computed: {
			...mapState(['player']),
		},
		data() {
			return {
				pop_show : false
			};
		},
		methods : {
			putOn(){
				this.$store.commit('player/commit_put_on_equip',this.itemDataVolume);
				this.pop_show = false
			},
			retrieve(){
				this.$store.commit('player/commit_retrieve',[this.itemDataVolume]);
				this.pop_show = false
			},
			takeOff(){
				this.$store.commit('player/commit_take_off_equip',this.itemDataVolume);
				this.pop_show = false
			},
			lock(){
				this.$store.commit('player/commit_lock',this.itemDataVolume);
				this.pop_show = false
			},
		}
	}
</script>

<style lang="scss">
	.comp-item{
		width:100%;
		height:100%;
		border-radius: 4px;
		overflow: hidden;
		.item-ico{
			width:100%;
			height:100%;
			position: relative;
			.ico{
				width:100%;
				height:100%;
			}
			.lock{
				position: absolute;
				left:0px;
				top:0px;
				background-color: rgba(0,0,0,.7);
				width:14px;
				height:14px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom-right-radius: 4px;
				.lock-ico{
					width:10px;
					height:10px;
					margin-left:-1px;
					margin-top:-1px;
				}
			}
		}
		@include qlty-bg-color;
		.item-pop-cover{
			position: absolute;
			top:0;
			right:0;
			bottom:0;
			left:0;
			background-color: rgba(0,0,0,.5);
			z-index: 99;
			display: flex;
			justify-content: center;
			align-items: center;
			.item-pop{
				min-width: 260px;
				border: 1px solid #000;
				background-color: #21252b;
				flex-shrink: 0;
				padding:10px 10px 0 10px;
				display: inline-flex;
				border-radius: 4px;
				flex-direction: column;
				position: absolute;
				z-index: 99999901;
				.name{
					margin-bottom:10px;
					width:100%;
					display: flex;
					justify-content: center;
					font-size:16px;
					font-weight: bold;
					@include qlty-color;
					position: relative;
					.tag{
						color:var(--color-green);
						font-size:12px;
						position: absolute;
						right:0;
						bottom:0px;
					}
				}
				
				.info{
					display: flex;
					.item-face{
						
						background-color: #282c35;
						width:50px;
						height:50px;
						border: 1px solid #000;
						border-radius: 4px;
						box-sizing: border-box;
						display: flex;
						justify-content: center;
						align-items: center;
						@include qlty-bg-color;
						.ico{
							width:48px;
							height:48px;
						}
					}
					.item-info{
						margin-left:10px;
						font-size:12px;
						display: flex;
						flex-direction: column;
						position: relative;
						align-content: flex-start;
						gap:3px;
						.row{
							display: flex;
							.not-enough{
								color:orangered
							}
						}
					}
				}
				
				.attr-warp{
					padding-bottom:10px;
					.hr{
						margin-bottom:10px;
					}
					.attr{
						.hd{
							margin-bottom:5px;
							color:#26e2ea
						}
						.bd{
							display: flex;
							flex-direction: column;
							gap:4px
						}
					}
				}
				
				
				.operate{
					position: absolute;
					right:-50px;
					bottom:10px;
					
					.item{
						width:50px;
						background-color: $game-color-2;
						height:30px;
						display: flex;
						justify-content: center;
						align-items: center;
						border-top: 1px solid #000;
						border-right: 1px solid #000;
						border-bottom: 1px solid #000;
						border-top-right-radius: 4px;
						border-bottom-right-radius: 4px;
						cursor: pointer;
						margin-top:8px
					}
				}
				
			}
		}
	}
</style>